import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Divider, Button } from 'antd'
import { showMsg } from '@/utils/utils';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getOrderRentDetail, getPatientHospitalizationInfo } from '@/services/order/api';
import { print } from '@/utils/utils'; 
import './style.less';

const FeeDetailDialog: React.FC<any> = (props) => {
  const { 
    admission_num,
    handleModalVisible
  } = props;
  
  const columns: ProColumns<STOCKGOODSAPI.GoodsItem>[] = [
    {
      title: '商品名称',
      dataIndex: 'goods_name',
      width: 200
    },
    {
      title: '登记时间',
      dataIndex: 'register_time',
      width: 160
    },
    {
      title: '租赁周期',
      dataIndex: 'lease_cycle',
      width: 70,
      valueType: 'select',
      valueEnum: {
        H: '按小时',
        D: '按天'
      }
    },
    {
      title: '周期长度',
      dataIndex: 'cycle_num',
      width: 70,
      align: 'right',
      valueType: 'digit'
    },
    {
      title: '单价',
      dataIndex: 'goods_price',
      width: 80,
      valueType: 'money',
      align: 'right'
    },
    {
      title: '数量',
      dataIndex: 'goods_num',
      width: 60,
      align: 'right',
      valueType: 'digit'
    },
    {
      title: '价格',
      dataIndex: 'goods_total_price',
      valueType: 'money',
      align: 'right',
      width: 80
    },
    {
      title: '结算状态',
      dataIndex: 'sett_status',
      width: 70,
      valueType: 'select',
      valueEnum: {
        U: '未结算',
        P: '已结算',
        G: '结算中',
        W: '待结算'
      }
    }
  ]
  const [list, setList] = useState<any>([]);
  const [patientInfo, setPatientInfo] = useState<any>({});

  useEffect(() => {
    if (admission_num) {
      getOrderRentDetail({current: 1, pageSize: 99999, admission_num}).then(res => {
        setList(res.record_list);
      }).catch(error => {
        showMsg(error?.data?.errmsg);
      });

      getPatientHospitalizationInfo({visit_no: admission_num}).then(res => {
        setPatientInfo(res && res[0]);
      })
    }
  }, [admission_num])

  useEffect(() => {
    if (list && patientInfo.patient_id) {
      print(document.querySelector('.rent-list-dialog .ant-modal-body'), {
        size: 'portrait'
      });
    }
  }, [list, patientInfo])

  return <Modal
      width="90%"
      maskClosable={false}
      className="rent-list-dialog"
      onCancel={() => handleModalVisible(false)}
      footer={null}
      visible>
      <div className="dialog">
        <h2 className="tc">租赁清单</h2>
        <Divider />
        <div>1.患者信息</div>
        <Divider />
        <Descriptions className="bill-info-list" column={4}>
          <Descriptions.Item label="身份证号/住院号" span={2}>
            {patientInfo.identity_no}{patientInfo.identity_no && patientInfo.admission_num ? ' / ' : ''}{patientInfo.admission_num}
          </Descriptions.Item>

          <Descriptions.Item label="患者姓名">
            {patientInfo.patient_name}
          </Descriptions.Item>
          
          <Descriptions.Item label="归属科室">
            { patientInfo.admission_dept_name }
          </Descriptions.Item>
        </Descriptions>
       
        <div style={{marginBottom: 10}}>2.物品信息</div>
        
        <Divider style={{margin: '10px 0 0'}} />

        <ProTable<STOCKGOODSAPI.GoodsItem> 
          rowKey="goods_id"
          options={false}
          search={false}
          columns={columns}
          pagination={false}
          dataSource={list}
          bordered />
      </div>
    </Modal>
}
export default FeeDetailDialog;
